<template>
    <dv-border-box1>
        <div class="title">消防学习</div>
        <veEcharts :option="option" height="280px" :on-mouseclick="showTableList" />
        <el-dialog :fullscreen="fullscreen" title="学习统计" v-model="visable" width="1200px" destroy-on-close
            :close-on-click-modal="false">
            <div class="avue-crud__dialog__menu">
                <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
            </div>
            <fireSearch />
        </el-dialog>
    </dv-border-box1>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import veEcharts from './veEcharts.vue'
import { equipments } from '@/api/dashboard'
import fireSearch from '@/views/fireLearning/fireSearch.vue'
const visable = ref(false)

let fullscreen = ref(false)
const option = reactive({
    color: ['rgb(9,187,247)', 'rgb(184,254,165)', 'rgb(253,218,23)', 'rgb(252,152,12)'],
    grid: {
        top: '0%',
        bottom: '4%',
        left: '0%',
        containLabel: false
    },
    tooltip: {
        show: true,

        formatter: function (params) {
            const item = pieSeries.value.find((item) => item.name == params.name)
            return params.name + item.value + '%'
        },
        backgroundColor: 'rgba(0,0,0, 0.5)',
        textStyle: {
            color: '#fff',
            fontFamily: 'myFont'
        }
    },
    legend: {
        show: true,
        icon: 'circle',
        itemHeight: 7,
        itemWidth: 7,
        top: '9%',
        left: '40%',
        width: 40,
        formatter: function (name: string) {
            const item = pieSeries.value.find((item) => item.name == name)
            return '{title|' + name + ' }  {value|' + item.value + '%}'
        },
        textStyle: {
            rich: {
                title: {
                    fontSize: 12,
                    lineHeight: 15,
                    color: '#1f99c7',
                    fontFamily: 'myFont'
                },
                value: {
                    fontSize: 12,
                    lineHeight: 15,
                    color: '#fff',
                    fontFamily: 'myFont'
                }
            }
        }
    },
    series: []
})
const pieSeries = ref([
    {
        name: '考试合格率',
        value: 0
    },
    {
        name: '员工平均答题率',
        value: 0
    },
    {
        name: '员工刷题正确率',
        value: 0
    },
    {
        name: '安全教育课件学习率',
        value: 0
    }
])

const showTableList = () => {
    visable.value = true
}

const getData = async () => {
    const { data } = await equipments({ is_wxc: 1 })
    pieSeries.value[0].value = Number(data.learning.passRate.toFixed(2) || 0)
    pieSeries.value[1].value = Number(data.learning.participationRate.toFixed(2) || 0)
    pieSeries.value[2].value = Number(data.learning.accuracy.toFixed(2) || 0)
    pieSeries.value[3].value = Number(data.learning.certificateRate.toFixed(2) || 0)
    pieSeries.value.forEach((item, i: number) => {
        option.series.push({
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            top: '-20%',
            left: '0%',
            radius: [55 - i * 15 + '%', 50 - i * 15 + '%'],
            center: ['40%', '50%'],
            label: {
                show: false
            },
            data: [
                // 值
                {
                    value: (item.value / 100) * 270,
                    name: item.name
                },
                // 阴影
                {
                    value: 270 - (item.value / 100) * 270,
                    name: item.name,
                    itemStyle: {
                        opacity: 0.2
                    }
                },
                // 空白
                {
                    value: 90,
                    name: item.name,
                    itemStyle: {
                        opacity: 0
                    }
                }
            ]
        })
    })
}

onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped>
::deep(.border-box-content) {
    text-align: start;
}

.dv-border-box-1 {
    position: relative;



    .title {
        color: #edf4ff;
        height: 20px;
        font-family: 'myFont';
        font-size: 20px;
    }
}
</style>
